/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "./helpers/functions";

//------------------------------ Settings ------------------------------//

/**
 * TITON TOOLKIT SETTINGS
 *
 * Configure Toolkit itself, by customizing the final generated output.
 */

$titon: (
    "namespace": "", // Without "."
    "text-direction": ltr, // Either "ltr" or "rtl"
    "exclude-modules": ("flex"),
    "element-separator": "__",
    "modifier-separator": "--",
    "base-font-size": 14px,
) !default;

/**
 * FEATURE FLAGS
 *
 * Flags can be used to enable or disable specific features within Toolkit.
 * If a feature is disabled, it will not be compiled in the output.
 */

$titon-settings-flags: (
    "small-size": true,
    "large-size": true,
    // Temporarily enabled for dev
    "all-modifiers": true,
    "all-animations": true,
    "all-modules": true,
    "all-positions": true,
) !default;

/**
 * THEME STYLES
 *
 * Customize the default layout and structural styles as well as state and theme colors.
 */

$titon-settings-theme: (

    // Structure colors
    "fg-light": #889097,
    "fg-dark": #242a30,
    "bg-lightest": #f7f9fa,
    "bg-lighter": #e9eef1,
    "bg-light": #d7dee5,
    "bg-dark": #2d353c,
    "bg-darker": #232b32,
    "bg-darkest": #1a2229,
    "border-accent": #b3bdc6,

    // State colors
    "secondary-light": #e7ebee,
    "secondary": #b6c2c9,
    "secondary-dark": #929ba1,
    "primary-light": #aeb3d3,
    "primary": #727cb6,
    "primary-dark": #444a6d,
    "info-light": #93cfe5,
    "info": #348fe2,
    "info-dark": #1f5587,
    "debug-light": #91d5e9,
    "debug": #49b6d6,
    "debug-dark": #3a92ab,
    "success-light": #7cdda7,
    "success": #00acac,
    "success-dark": #006767,
    "warning-light": #ffead0,
    "warning": #fcd04b,
    "warning-dark": #c87e00,
    "error-light": #f8b2b2,
    "error": #ff5b57,
    "error-dark": #993634,

    // Sizing
    "line-height": 1.25,
    "opacity": .5,
    "opacity-disabled": .5,
    "transition": .3s,
    "margin": 1.25rem,
    "small-font-size": .7rem,
    "small-padding": .5rem,
    "medium-font-size": 1rem,
    "medium-padding": .75rem,
    "large-font-size": 1.3rem,
    "large-padding": 1rem,
    "round-radius": .2rem,
) !default;

/**
 * Z-INDEX
 *
 * A mapping of modules and their z-index value, to easily layer and stack appropriately.
 *
 *  1) Modal and Showcase should be higher than Blackout
 *  2) Tooltip and Popover should be higher than Modals in case they exist within them
 *  3) Off Canvas should be the lowest so everything can display above it
 */

$titon-settings-zindex: (
    "blackout": 600,
    "drop": 500,
    "flyout": 500,
    "mask": 500,
    "modal": 610,
    "off-canvas": 250,
    "popover": 700,
    "showcase": 610,
    "toast": 500,
    "tooltip": 700,
    "type-ahead": 500,
) !default;

/**
 * BREAKPOINT RANGES
 *
 * A mapping of media query aliases to pixel based breakpoint ranges (defined as a list).
 * These ranges are used extensively to provide integrated responsive design support.
 */

$titon-settings-breakpoints: (
    "xs": (null, 640px),
    "sm": (641px, 960px),
    "md": (961px, 1280px),
    "lg": (1281px, 1680px),
    "xl": (1681px, null),
) !default;

//------------------------------ Components ------------------------------//

$titon-global: (
    "span-count": 12,
) !default;

$titon-accordion: (
    "class": "accordion",
    "transition": theme-setting("transition"),
) !default;

$titon-breadcrumb: (
    "class": "breadcrumb",
) !default;

$titon-blackout: (
    "opacity": 0.85,
    "transition": theme-setting("transition"),
) !default;

$titon-button: (
    "class": "button",
) !default;

$titon-button-group: (
    "class": "button-group",
    "modifiers": ("justified"), // justified, vertical
) !default;

$titon-carousel: (
    "class": "carousel",
    "animations": ("slide", "slide-up", "fade"), // slide, slide-up, fade
    "opacity": theme-setting("opacity"),
    "transition": 1s,
) !default;

$titon-checkbox: (
    "class": "checkbox",
) !default;

$titon-divider: (
    "class": "divider",
) !default;

$titon-drop: (
    "class": "drop",
    "modifiers": ("down", "up", "left", "right"), // down, up, left, right
    "transition": theme-setting("transition"),
) !default;

$titon-flex: (
    "class-region": "region",
    "class-block": "block",
    "modifiers": ("wrap", "grid"), // horizontal, vertical, wrap, grid
    "width": 100%,
    "gutter": false,
    "grid-gutter": 1rem,
) !default;

$titon-flyout: (
    "class": "flyout",
    "transition": theme-setting("transition"),
) !default;

$titon-form: (
    "class": "form",
    "modifiers": ("inline"), // inline
) !default;

$titon-gateway: (
    "class": "gateway",
) !default;

$titon-grid: (
    "class-end": "end",
    "class-row": "row",
    "class-column": "col",
    "width": 100%,
    "gutter": false,
    "push-pull": true,
) !default;

$titon-input: (
    "class": "input",
) !default;

$titon-input-group: (
    "class": "input-group",
) !default;

$titon-label: (
    "class": "label",
    "modifiers": ("badge"), // badge, ribbon-left, ribbon-right, arrow-left, arrow-right
) !default;

$titon-lazy-load: (
    "class": "lazy-load",
) !default;

$titon-loader: (
    "class": "loader",
    "modifiers": ("bar-wave"), // bar-wave, bubble-wave, bubble-spinner
    "wave-count": 5,
    "bar-width": 0.3rem,
    "bar-height": 1rem,
    "bubble-size": .75rem,
    "spinner-delay": 0.15
) !default;

$titon-mask: (
    "class": "mask",
    "opacity": .9,
    "transition": theme-setting("transition"),
) !default;

$titon-matrix: (
    "class": "matrix",
    "transition": theme-setting("transition"),
) !default;

$titon-modal: (
    "class": "modal",
    "animations": ("fade", "from-above", "from-below"), // fade, from-above, from-below, slide-in-top, slide-in-right, slide-in-bottom, slide-in-left
    "transition": theme-setting("transition"),
) !default;

$titon-notice: (
    "class": "notice",
) !default;

$titon-off-canvas: (
    "class": "off-canvas",
    "animations": ("push", "on-top", "squish"), // push, push-reveal, push-down, reverse-push, reveal, on-top, squish
    "width": 25rem,
    "transition": .5s,
) !default;

$titon-pagination: (
    "class": "pagination",
    "modifiers": ("grouped"),
) !default;

$titon-pin: (
    "class": "pin",
    "transition": .2s,
) !default;

$titon-popover: (
    "class": "popover",
    "animations": ("fade"), // fade, from-above, from-below, flip-rotate
    "arrow-width": 8,
    "transition": .15s,
) !default;

$titon-progress: (
    "class": "progress",
    "transition": .5s
) !default;

$titon-radio: (
    "class": "radio",
) !default;

$titon-select: (
    "class": "select",
    "transition": theme-setting("transition"),
    "dropdown-menu": true
) !default;

$titon-steps: (
    "class": "steps",
) !default;

$titon-switch: (
    "class": "switch",
    "modifiers": ("stacked"), // stacked
    "transition": theme-setting("transition"),
) !default;

$titon-tabs: (
    "class": "tabs",
) !default;

$titon-table: (
    "class": "table",
) !default;

$titon-toast: (
    "class": "toast",
    "animations": ("fade", "slide-up", "slide-down", "slide-left", "slide-right"), // fade, slide-up, slide-down, slide-left, slide-right
    "positions": ("bottom-left", "bottom-right"), // top-left, top, top-right, left, right, bottom-left, bottom, bottom-right
    "transition": theme-setting("transition"),
) !default;

$titon-tooltip: (
    "class": "tooltip",
    "animations": ("fade"), // fade, from-above, from-below, flip-rotate
    "arrow-width": 6,
    "transition": .15s,
    "background-color": black(.65),
) !default;

$titon-type-ahead: (
    "class": "type-ahead",
    "transition": theme-setting("transition"),
) !default;

$titon-typography: (
    "h1-font-size": 3rem,
    "h2-font-size": 2.5rem,
    "h3-font-size": 2.1rem,
    "h4-font-size": 1.8rem,
    "h5-font-size": 1.5rem,
    "h6-font-size": 1.2rem,
) !default;

//------------------------------ Transitions ------------------------------//

$titon-slide-collapse: (
    "class": "slide-collapse",
    "modifiers": ("vertical", "horizontal"),
    "transition": theme-setting("transition"),
) !default;

//------------------------------ Imports ------------------------------//

@import "./helpers/mixins";
@import "./helpers/grid";
@import "./helpers/flexbox";
@import "./helpers/responsive";
@import "./helpers/components";
@import "./helpers/placeholders";
